#index {
  color: #d3d6dd;
  background-color: #000000;
  width: 100%;
  height: 100vh;

  .bg {
    width: 100%;
    height: 100%;
    padding: 0.2rem 0.2rem 0 0.2rem;
    background-image: url("../assets/pageBg.png");
    background-size: 100%;
    background-position: center center;
  }

  .host-body {
    height: 100%;

    .title {
      position: relative;
      width: 10rem;
      text-align: center;
      background-size: cover;
      background-repeat: no-repeat;

      .title-text {
        font-size: 0.4rem;
        position: absolute;
        bottom: 0.2rem;
        left: 50%;
        transform: translate(-50%);
        font-weight: bold;
        z-index: 1000;
        width: 100%;
      }

      .title-bototm {
        position: absolute;
        bottom: -0.375rem;
        left: 50%;
        transform: translate(-50%);
        top: 0.8rem
      }
    }

    // 平行四边形
    .react-left {
      cursor: pointer;
      font-size: 0.225rem;
      width: 3.75rem;
      height: 0.625rem;
      line-height: 0.625rem;
      text-align: center;
      transform: skewX(-45deg);
      margin-top: -0.2rem;

      .react-after {
        position: absolute;
        right: -0.3125rem;
        top: 0;
        height: 0.625rem;
        width: 0.625rem;
        background-color: #0f1325;
        transform: skewX(45deg);
      }

      .text {
        display: inline-block;
        transform: skewX(45deg);
      }
    }

    .react-right {
      cursor: pointer;
      font-size: 0.225rem;
      width: 3.75rem;
      height: 0.625rem;
      line-height: 0.625rem;
      text-align: center;
      transform: skewX(45deg);

      .react-before {
        position: absolute;
        left: -0.3125rem;
        top: 0;
        height: 0.625rem;
        width: 0.625rem;
        background-color: #0f1325;
        transform: skewX(-45deg);
      }

      .text {
        display: inline-block;
        transform: skewX(-45deg);
      }
    }

    .body-box {
      margin-top: 0.05rem;
      display: flex;
      flex-direction: column;
      height: calc((100% - 0.13rem) * 0.86);
      //下方区域的布局
      .content-box {
        display: grid;
        grid-template-columns: 4fr 4fr 4fr 4fr;
        height: 58%;

        #centreLeft1, #centreLeft2, #centreLeft3, #centreLeft4 {
          padding: 0.05rem 0.2rem 0.1rem 0.2rem;
          min-width: 3rem;
          height: 100%;
          border-radius: 0.0625rem;
          position: relative;

          .bg-color-black {
            height: 98%;
            border-radius: 0.125rem;
          }

          :hover {
            cursor: pointer;
          }

          .text {
            font-size: 0.21rem;
            font-weight: bold;
            color: #c3cbde;
            position: absolute;
            top: 0.2rem;
            left: 0.5rem
          }
        }
      }

      // 底部数据
      .bototm-box {
        height: calc(38.8%);
        display: grid;
        grid-template-columns: 6fr 2.5fr;

        #bottomLeft {
          padding: 0.2rem 0.2rem 0;
          height: 100%;
          min-width: 3.75rem;
          border-radius: 0.0625rem;

          .bg-color-black {
            height: 98%;
            border-radius: 0.125rem;
          }

          .text {
            color: #c3cbde;
            font-weight: bold;
            font-size: 0.18rem;
          }

          #chartContainer {
            width: 100%;
            height: 98%;

            .drop_input {
              display: flex;
              flex-flow: row;

              form {
                display: flex;
                width: 100%;
                margin-top: -0.3rem;
                margin-left: 2rem;
              }

              .search_btn_char {
                position: absolute;
                width: 3rem;
                right: 3.6rem;

                #search, #reset {
                  width: 0.8rem;
                  height: 0.38rem;
                  border: 1px solid #fff;
                  border-radius: 0.1rem;
                  background: #fff;
                  color: #0f1325;
                  font-size: 0.18rem;
                  margin: 0.01rem 0.05rem;
                }

                #search, #reset:hover {
                  cursor: pointer;
                }
              }
            }

            #bottomLeftChart {
              width: 100%;
              height: 97%;
            }
          }

        }

        #bottomRight {
          padding: 0.2rem 0.2rem 0;
          height: 100%;
          min-width: 3.75rem;
          border-radius: 0.0625rem;

          .bg-color-black {
            //height: 100%;
            border-radius: 0.125rem;
          }

          .text {
            color: #c3cbde;
            font-weight: bold;
            font-size: 0.18rem;
          }

          .chart-box {
            margin-top: 0.2rem;
            width: 2.125rem;
            height: 2.125rem;

            .active-ring-name {
              padding-top: 0.125rem;
            }
          }

          #bottomRightChart {
            height: 98%;
          }
        }

      }
    }

    .history {
      display: grid;
      grid-template-columns: 6fr 2.5fr;
      justify-content: space-between;
      height: calc((100% - 0.13rem) * 0.05);

      .history_left {
        display: flex;
        width: 100%;
        justify-content: space-between;

        .pilotLamp {
          display: flex;
          width: 40%;
          height: 100%;
          justify-content: space-between;
          font-size: 0.2rem;
          align-items: center;
          .p_list{
            position: relative;
          }
          .p_list span:nth-child(1){
            position: absolute;
            left: -0.8rem;
            top: 0.08rem;
          }
          .p_list span:nth-child(2), span:nth-child(3) {
            display: inline-block;
            width: 0.3rem;
            height: 0.3rem;
            border: none;
            border-radius: 0.15rem;
          }

          .p_list span:nth-child(2):hover {
            cursor: pointer;
          }
        }
      }

      .history_right {
        display: flex;
        justify-content: space-between;
        width: 100%;

        span {
          font-size: 0.28rem;
          font-weight: bold;
          font-family: fangsong;
          padding-top: 0.15rem;
        }

        .btn_r {
          right: 1rem;
        }

        :hover {
          cursor: pointer
        }
      }

      .history_btn {
        width: 3rem;
        height: 0.45rem;
        border: 1px solid #6586ec;
        border-radius: 0.125rem;
        text-align: center;
        line-height: 0.45rem;
        font-weight: bold;
        margin-top: 0.1rem;
        color: #fff;
        font-size: 0.2rem;

        :hover {
          cursor: pointer;
        }

        a {
          color: #c3cbde;
          font-size: 0.2rem;
        }
      }
    }

  }
}
